<template>
	<t-card>
		<div class="refinery-management">
			<!-- 顶部筛选区域 -->
			<div class="filter-section">
				<h1 style="font-size: 18px;">{{$route.query.refineryName}}</h1>
			</div>

			<!-- 炼厂卡片列表 -->
			<div class="refinery-card-list">
				<t-row :gutter="[16, 16]">
					<t-col :span="4" v-for="(refinery, index) in refineryList" :key="index">
						<t-card class="refinery-card" hover-shadow>
							<div class="refinery-info">
								<div class="refinery-info-left">
									<div class="refinery-name">当前油品：{{ refinery.oilName }}</div>
									<div class="stock-info">库存数量: {{ refinery.stock }}</div>
									<div class="oil-info">已售库存: {{ refinery.sellStock }}</div>
									<div class="oil-info">可提库存: {{ refinery.useStock }}</div>
								</div>
							</div>
							<div class="action-buttons">

								<t-button variant="outline" theme="primary"
									@click="onEditRefinery(refinery)">编辑库存</t-button>
							</div>
						</t-card>
					</t-col>
				</t-row>
				<t-pagination v-model="pagination.current" :total="pagination.total"
					:page-size.sync="pagination.pageSize" @current-change="onCurrentChange"
					@page-size-change="onPageSizeChange" />
			</div>
		</div>

		<!-- 炼厂对话框（新建/编辑共用） -->
		<EditStockDialog :visible="dialogVisible" :is-edit="isEdit" :edit-data="editData" @close="hideDialog"
			@submit="handleSubmit" />
	</t-card>
</template>

<script setup lang="ts">
	import { MessagePlugin } from 'tdesign-vue-next';
	import { ref, onMounted, reactive, watch } from 'vue';
	import EditStockDialog from './components/EditStockDialog.vue';
	import { getTjylRefineryOilTypeList, editOilTypeStock } from '@/api/refinery.ts'
	import { useRoute, useRouter } from 'vue-router';
	const router = useRouter();
	const $route = useRoute()

	const loading = ref(false);
	const formData = reactive({
		region: 'all',
		status: 'all',
	});

	const pagination = ref({
		current: 1,
		pageSize: 9,
		total: 0,
	});

	const tableData = ref([]);


	const onPageChange = (curr : number) => {
		pagination.value.current = curr;
	};


	interface RefineryInfo {
		id : string;
		province : string;
		name : string;
		currentOil : string;
		totalStock : string;
		soldStock : string;
		availableStock : string;
	}

	const activeTab = ref('0');
	const dialogVisible = ref(false);
	const isEdit = ref(false);
	const editData = ref<any>(null);

	onMounted(() => {
		// 模拟数据，实际项目中应该从API获取
		getRefineryListApi()
	});


	const provinceId = ref([])

	const onCurrentChange = (e) => {
		pagination.value.current = e
		getRefineryListApi()
	}
	const onPageSizeChange = (e) => {
		pagination.value.pageSize = e
		getRefineryListApi()
	}

	const refineryList = ref([])
	const getRefineryListApi = () => {
		refineryList.value = []
		getTjylRefineryOilTypeList({
			pageNo: pagination.value.current,
			pageSize: pagination.value.pageSize,
			refineryId: $route.query.refineryId
		}).then(res => {
			tableData.value = res.records
			pagination.value.total = res.total
			refineryList.value = res.records
		})
	}

	const onTabChange = (value : string) => {
		activeTab.value = value;
		provinceId.value = value
		pagination.value.current = 1
		pagination.value.pageSize = 9
		getRefineryListApi()
	};

	// 显示新建炼厂弹窗
	const showAddDialog = () => {
		isEdit.value = false;
		editData.value = null;
		dialogVisible.value = true;
	};

	const toStockPage = () => {
		router.push({
			path: `/terminal/approval/detail/${row.id}`,
			query: {
				status: row.status
			}
		});
	}

	// 隐藏弹窗
	const hideDialog = () => {
		dialogVisible.value = false;
	};

	// 处理表单提交（包括新建和编辑）
	const handleSubmit = (formData : any) => {
		if (isEdit.value) {
			// TODO: 调用编辑API
			editOilTypeStock(formData).then(res => {
				MessagePlugin.success('编辑成功')
				getRefineryListApi()
			})
		} else {
			// 新建逻辑
			console.log('新建炼厂');
			// TODO: 调用新增API
		}

		// 关闭弹窗
		hideDialog();
		// 刷新列表
	};

	const onEditRefinery = (refinery : RefineryInfo) => {
		// 编辑炼厂逻辑
		console.log('准备编辑炼厂', refinery);
		isEdit.value = true;
		editData.value = { ...refinery };
		dialogVisible.value = true;
	};
	
	watch(() => $route.params, () => {
		getRefineryListApi()
	}, { immediate: true }); // 立即执行一次，以处理初始加载的情况
	

	const onViewReport = (refinery : RefineryInfo) => {
		// 查看检测报告逻辑
		console.log('查看检测报告', refinery);
	};
</script>

<style lang="less" scoped>
	.refinery-management {
		width: 100%;

		.filter-section {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20px;
		}

		.refinery-card-list {
			margin-top: 16px;
		}

		.refinery-card {
			height: 100%;
			margin-bottom: 16px;

			.refinery-info {
				display: flex;
				flex-direction: column;
				margin-bottom: 16px;

				.province {
					font-size: 14px;
					margin-bottom: 8px;
				}

				.refinery-name {
					font-size: 18px;
					font-weight: bold;
					margin-bottom: 16px;
				}

				.oil-info,
				.stock-info,
				.sold-info,
				.available-info {
					margin-bottom: 8px;
					font-size: 14px;
				}
			}

			.action-buttons {
				display: flex;
				justify-content: space-between;
				margin-top: 16px;
			}
		}
	}
</style>